<template>
	<view>
		<view>
			<up-input placeholder="请输入完整帖子标题" border="bottom" v-model="value"></up-input>
		</view>
		<!-- <u-divider></u-divider> -->
		<view class="text-textarea">
			<u--textarea v-model="value1" placeholder="请输入正文" border="none">
			</u--textarea>
			<view class="ccc">
				<view>
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="10"></u-upload>
				</view>
			</view>
		</view>
		<view class="bottom-sumit">
			<view class="bottom-sumit-text" @click="release(data)">
				发布
			</view>
		</view>

		<!-- 帖子类型选择提示框 -->
		<!-- <u-popup :show="show" @close="close" @open="open" round=10 mode="center">
			</u-popup> -->
		<u-modal :show="show" :title="title" :showConfirmButton="true" :showCancelButton="true" @cancel="cancel"
			@confirm="confirm(data)">
			<view class="aa">
				<u-radio-group v-model="selectedRadio" placement="column">
					<u-radio v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.name">
					</u-radio>
				</u-radio-group>
			</view>
		</u-modal>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	//导入新增帖子接口
	import {
		addPost
	} from '@/api/tiezi/post'
	import useUserStore from '@/store/modules/user'

	const selectedRadio = ref('')
	// 基本案列数据
	const radiolist1 = ref([{
			name: 'C/C++类',
			disabled: false,
		},
		{
			name: 'Java类',
			disabled: false,
		},
		{
			name: 'JavaScript类',
			disabled: false,
		},
		{
			name: 'Python类',
			disabled: false,
		},
	]);

	//图片
	const fileList1 = ref([])
	const userStore = useUserStore()
	const afterRead = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = fileList1.value.length;
		lists.map((item) => {
			fileList1.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item = fileList1.value[fileListLen];
			fileList1.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			fileListLen++;
		}
	};
	//上传图片
	const uploadFilePromise = (url) => {
		console.log(url, 'qw')
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: 'http://localhost:8080/common/upload',
				filePath: url,
				name: 'file',
				formData: {
					// user: 'test',
					avatarfile: '(binary)'
				},
				success: (res) => {
					const list = JSON.parse(res.data)
					data.value.imgUrl = list.url
					setTimeout(() => {
						resolve(res.data.data);
					}, 1000);
				},
			});
		});
	};
	const value = ref(''); //帖子标题
	const value1 = ref(''); //帖子内容
	//
	const success = ((res) => {
		console.log(res, '99999')
	})

	const select = ((res) => {

		console.log(res, '4444')
	})

	const progress = ((res) => {
		console.log(res, '6666')
	})

	const fail = ((res) => {
		console.log(res, '5555')
	})
	// 删除图片(当点击删除按钮时，触发 deletePic 方法来删除对应的文件。)
	const deletePic = (event) => {
		fileList1.value.splice(event.index, 1);
	};
	//调接口上传数据
	const data = ref({
		title: value,
		content: value1,
		imgUrl: null,
		type: selectedRadio
	})
	//类型选择标志位
	const show = ref(false)
	const cancel = (() => {
		show.value = false;
	})
	const title = ref('请选择帖子类型')
	//点击模态框确定按钮
	const confirm = ((e) => {
		console.log(e, 'data是个啥')
		//调用发布帖子接口
		addPost(e).then((res) => {
			uni.showToast({
				title: '发布成功',
				icon: 'none'
			})
			show.value = false;
		})
	})
	//点击发布，即（发布帖子）
	function release(e) {
		show.value = true;
		// addPost(e).then((res) => {
		// 	uni.showToast({
		// 		title: '发布成功',
		// 		icon: 'none'
		// 	})
		// })

	}
</script>

<style lang="scss" scoped>
	.text-textarea {
		margin-top: 20rpx;
	}

	//CSS深度查询
	:deep(.u-textarea) {
		background-color: rgba(242, 242, 242, 1);
	}

	.ccc {
		padding: 20px;
	}

	.bottom-sumit {
		position: fixed;
		bottom: 150rpx;
		background-color: rgba(255, 255, 255, 1);
		width: 100%;

		.bottom-sumit-text {
			width: auto;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			border-radius: 36rpx;
			background-color: rgba(255, 98, 0, 1);
			color: rgba(255, 255, 255, 1);
			margin: 18rpx 40rpx;
		}
	}

	// .aa{
	// 	position: absolute;
	// 	top:50%;
	// 	left:50%;
	// 	transform: translate(-50%,-50%);
	// }

	:deep(.uni-navbar) {
		display: flex;
		background-color: #fff;
		justify-content: center;
	}
</style>